<template>
  <div id="tabbar" v-if="myTage">
    <ul>
      <li>
        <router-link active-class="mySelect" tag="a" to="/home">
          <div></div>首页
        </router-link>
      </li>
      <li>
        <router-link active-class="mySelect" tag="a" to="/category">
          <div></div>分类
        </router-link>
      </li>
      <li>
        <router-link active-class="mySelect" tag="a" to="/shoppingCart">
          <div></div>购物车
        </router-link>
      </li>
      <li>
        <router-link active-class="mySelect" tag="a" to="/mine">
          <div></div>我的
        </router-link>
      </li>
    </ul>




  </div>
</template>

<script>
export default {
  name: "Tabbar",
  props:{
    myTage:{
      type:Boolean,
      default(){
        return true;
      }

    }
  }
}
</script>

<style scoped>
  #tabbar{
    position: fixed;
    z-index: 99;
    height: 50px;
    width: 100%;
    bottom: 0;
    background: #FFFFFF;
    text-align: center;
    border-top: 2px solid #EEEEEE;
  }
  #tabbar ul{
    list-style: none;
    display: flex;
  }
  #tabbar ul li{
    flex: 1;
    font-size: 15px;
  }
  #tabbar ul li a{
    display: block;
  }
  #tabbar ul li a div{
    font-size: 23px;
    line-height: 30px;
  }

  .mySelect{
    color: deeppink;
  }
</style>
